<template>
  <div>
    <el-row class="back-head" type="flex" align="middle">
      <span @click="backPath()" style="cursor: pointer"><i class="el-icon-arrow-left"></i>返回</span>
      <span class="primary">创建店铺单品活动</span>
    </el-row>
    <div class="main">
      <el-form :model="params" ref="ruleForm" label-width="120px" label-position="right" size="small">
        <el-row class="head" type="flex" align="middle">活动信息</el-row>
        <div class="item">
          <el-form-item label="选择商家" prop="busid" :rules="[{ required: true, message: '请选择商家', trigger: 'change' }]">
            <el-row type="flex">
              <el-button style="width: 500px;text-align: left" @click="dialogTableVisible = true"
                placeholder="点击右边按钮选择商家">{{params.busname?params.busname:'选择商家'}}
              </el-button>
            </el-row>
          </el-form-item>
          <el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' }]">
            <el-input v-model="params.name" placeholder="输入活动名称" />
          </el-form-item>
          <el-form-item label="优惠类型" required>
            <el-select v-model="params.ptype" placeholder="请选择优惠类型">
              <el-option label="折扣" value="2" />
              <el-option label="特价" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否限购" required>
            <el-select v-model="params.isLimited" placeholder="请选择优惠类型">
              <el-option label="限购" value="true" />
              <el-option label="不限购" value="false" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="params.isLimited =='true'" prop="limitNum" label="限购数量" :rules="[{ required: true, message: '请输入数量' }]">
            <el-input-number v-model="params.limitNum" :min='1' :max='99' :precision='0' />
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">活动时间</el-row>
        <div class="item">
          <el-form-item label="起止日期" prop="startTimeToendTime" :rules="[{ required: true, message: '请选择起止日期', trigger: 'blur' }]">
            <el-date-picker style="width:500px;" v-model="params.startTimeToendTime" type="daterange" align="left"
              :clearable='false' :editable='false'
              :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions" unlink-panels
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="生效星期" prop="worktoday" :rules="[{ type:'array', required: true, message: '最少选择一天工作日', trigger: 'change'},]">
            <el-checkbox-group v-model="params.worktoday">
              <el-checkbox style="margin-left: 0;margin-right: 30px;" v-for="(week,index) in weeks" :label="index+1" :key="index">{{week}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="生效时间段" required>
            <el-radio v-model="timeType" label="1">全天</el-radio>
            <el-radio v-model="timeType" label="2">自定义时间</el-radio>
          </el-form-item>
          <el-form-item label="自定义时间" required v-if="timeType==2" style="margin-bottom: 0">
            <el-row>(最少选择一个)</el-row>
            <el-row type="flex"> 自定义时间一：
              <el-form-item prop="firstTime" :rules="[{type:'date',validator:firstTime, trigger: 'change' }]">
                <el-time-picker is-range v-model="params.firstTime" range-separator="至" start-placeholder="开始时间"
                  end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm" value-format="HH:mm" />
              </el-form-item>
            </el-row>
            <el-row type="flex"> 自定义时间二：
              <el-form-item prop="secondTime" :rules="[{type:'date',validator:secondTime, trigger: 'change' }]">
                <el-time-picker is-range v-model="params.secondTime" range-separator="至" start-placeholder="开始时间"
                  end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm" value-format="HH:mm" />
              </el-form-item>
            </el-row>
            <el-row type="flex"> 自定义时间三：
              <el-form-item prop="thirdTime" :rules="[{type:'date',validator:thirdTime, trigger: 'change' }]">
                <el-time-picker is-range v-model="params.thirdTime" range-separator="至" start-placeholder="开始时间"
                  end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm" value-format="HH:mm" />
              </el-form-item>
            </el-row>
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">同享设置</el-row>
        <div class="item">
          <el-form-item label="是否同享" required>
            <el-switch v-model="params.shared" size="small" />
          </el-form-item>
        </div>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="issubmitLoading">保存去选商品</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-dialog title="选择商家" v-dialogDrag :visible.sync="dialogTableVisible" width="850px" :close-on-press-escap="true">
      <shop-list v-on:listenToShop="getShopData" />
    </el-dialog>
  </div>
</template>
<script>
  import shopList from '@/components/dialog/shopList'

  export default {
    components: {
      shopList,
    },
    data() {
      return {
        pickerOptions:{
          disabledDate(time) {
            return time.getTime() <= (Date.now() - 3600 * 1000 * 24 )
          },
        },
        busniessMsg: [],                               //选中的商家信息
        timeType: '1',                                 //时间定义
        weeks: ['周一', '周二', '周三', '周四', '周五', '周六','周日'],
        issubmitLoading: false,                        //提交等待
        dialogTableVisible: false,                     //商家列表
        params: {
          ptype: '2',                                  //活动类型
          name: '',                                    //活动名称
          //specialImg:'',                             //活动图片
          busname: '',                                 //商家名称
          busid: '',                                   //商家id
          isLimited: 'true',                           //是否限购
          limitNum: undefined,                         //限购数量
          busid: '',                                   //商家信息
          startTimeToendTime: '',                      //截止日期
          worktoday: [1, 2, 3, 4, 5, 6, 7],            //星期
          firstTime: '',                               //时间一
          secondTime: '',                              //时间二
          thirdTime: '',                               //时间三
          shared: false,                               //同享
        },
      }
    },
    methods: {
      getShopData(data) {
        this.params.busname = data.name
        this.params.busid = data.id
        this.dialogTableVisible = false
      },
      firstTime(rule, value, callback) { //时间验证
        if (this.timeType == '2' && !value) {
          callback(new Error('选择自定义时间，自定义时间一必填!'))
        } else {
          callback()
        }
      },
      secondTime(rule, value, callback) { //时间验证
        if (this.params.firstTime && value && value[0] <= this.params.firstTime[1]) {
          callback(new Error('自定义时间二的开始时间需大于自定义时间一的结束时间'))
        } else {
          callback()
        }
      },
      thirdTime(rule, value, callback) { //时间验证
        if (this.params.secondTime && value && value[0] <= this.params.secondTime[1]) {
          callback(new Error('自定义时间三的开始时间需大于自定义时间二的结束时间'))
        } else {
          callback()
        }
      }, submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            if (this.timeType == '1') {
              params.firstTime = ''
              params.secondTime = ''
              params.thirdTime = ''
            }
            if (!params.isLimited) {
              params.limitNum = ''
            }
            params.firstTime = params.firstTime ? params.firstTime.join(',') : ''
            params.secondTime = params.secondTime ? params.secondTime.join(',') : ''
            params.thirdTime = params.thirdTime ? params.thirdTime.join(',') : ''
            params.startTimeToendTime = params.startTimeToendTime ? params.startTimeToendTime.join(',') : ''
            this.issubmitLoading = true
            this.$http.post('/server/activity/save', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '修改单品活动成功'})
                this.$router.push({path: '/main/activity/citem', query: {id: res.data.data.activityId}})
              }
            }).finally(() => { this.issubmitLoading = false })
          } else {
            this.$message.error('有不合法的输入或未填写的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      backPath() {
        this.$router.replace({path: '/main/activity/pron'})
      }
    }
  }
</script>
<style lang="scss" scoped>
  .primary {
    color: $c-active-item;
  }

  .main .head {
    background: $c-active-item;
  }

  @import './css/actives.scss';
</style>
